<template>
  <div>
    <Myhede :backgroundColor="'pink'" :color="'#000'" title="table案例" />
    <div id="gao">
      <component :is="hname"></component>
    </div>
    <Mytabbar :tabs='tabList' @cuan='btn1' />
  </div>
</template>

<script>
  import Myhede from './components/MyHeader'
  import Mytabbar from './components/MyTabBar'

  import MyGoodsSearch from './views/MyGoodsSearch'
  import MyGoodsList from './views/MyGoodsList'
  import MyUserInfo from './views/MyUserInfo'
  export default {
    components: {
      Myhede,
      Mytabbar,
      MyGoodsList,
      MyGoodsSearch,
      MyUserInfo
    },
    data() {
      return {
        tabList: [{
          iconText: "icon-shangpinliebiao",
          text: "商品列表",
          componentName: "MyGoodsList"
        }, {
          iconText: "icon-sousuo",
          text: "商品搜索",
          componentName: "MyGoodsSearch"
        }, {
          iconText: "icon-user",
          text: "我的信息",
          componentName: "MyUserInfo"
        }],
        hname: "MyGoodsList"
      }
    },
    methods: {
      btn1(index) {
        this.hname = this.tabList[index].componentName
      }
    }
  }
</script>

<style scoped>
  #gao {
    padding: 45px 0 50px 0;
  }
</style>>